<template>
 <div class="wrapper-all">
   <div class="wrapper-top">
     <span class="iconfont">&#xe638;</span>最新发布
   </div>
   <div class="wrapper">
     <swiper :options="swiperOption" v-if="showSwiper">
       <swiper-slide v-for="item in list" :key="item.id">
         <img class="swiper-img" :src="item.imgUrl"/>
       </swiper-slide>
       <div class="swiper-pagination"  slot="pagination"></div>
     </swiper>
   </div>
   <div class="partition-div02"></div>
 </div>
</template>

<script>
export default {
  name: 'ConsultSwiper',
  props: {
    list: Array
  },
  data () {
    return {
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000, // 3秒切换一次
          stopOnLastSlide: false, // 如果设置为true，当切换到最后一个slide时停止自动切换。（loop模式下无效）
          disableOnInteraction: false // 用户操作swiper之后，是否禁止autoplay。默认为true：停止。
        },
        // 显示分页
        pagination: {
          el: '.swiper-pagination',
          clickable: true // 允许分页点击跳转
        }
      }
    }
  },
  computed: {
    showSwiper () {
      return this.list.length
    }
  }
}
</script>

<style lang="stylus" scoped>
  .wrapper-top
    font-family: PingFangSC-Regular;
    font-size: 22px;
    color: #1F242B;
    line-height: 1.2rem;
    span
      color #148DE0
  // >>>样式穿透,wrapper下边的这个样式 都让它变成红色
  .wrapper >>> .swiper-pagination-bullet-active
    background #FFFFFF !important
  .wrapper
    width: 95.5%;
    margin-left: .2rem;
  .swiper-img
    width 100%
    height: 3.08rem;
  .partition-div02
    margin-top .2rem
    height .32rem
    background-color #eaeaea
</style>
